<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>智能文档管理系统 - 原型演示</title>
    <link rel="stylesheet" href="styles.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
</head>
<body>
    <!-- 顶部导航栏 -->
    <header class="header">
        <div class="header-content">
            <div class="logo">
                <i class="fas fa-folder-open"></i>
                <span>智能文档管理系统</span>
            </div>
            <div class="search-container">
                <div class="search-box">
                    <i class="fas fa-search search-icon"></i>
                    <input type="text" id="globalSearch" placeholder="搜索文档、项目、标签..." class="search-input">
                    <div class="search-suggestions" id="searchSuggestions"></div>
                </div>
            </div>
            <div class="user-menu">
                <div class="notification-icon">
                    <i class="fas fa-bell"></i>
                    <span class="notification-badge">3</span>
                </div>
                <div class="user-avatar">
                    <i class="fas fa-user-circle"></i>
                    <span>张经理</span>
                </div>
            </div>
        </div>
    </header>

    <!-- 主体内容区域 -->
    <div class="main-container">
        <!-- 左侧导航 -->
        <aside class="sidebar">
            <nav class="nav-menu">
                <div class="nav-item active" data-page="dashboard">
                    <i class="fas fa-home"></i>
                    <span>工作台</span>
                </div>
                <div class="nav-item" data-page="documents">
                    <i class="fas fa-file-alt"></i>
                    <span>文档管理</span>
                </div>
                <div class="nav-item" data-page="projects">
                    <i class="fas fa-project-diagram"></i>
                    <span>项目管理</span>
                </div>
                <div class="nav-item" data-page="search">
                    <i class="fas fa-search-plus"></i>
                    <span>高级搜索</span>
                </div>
                <div class="nav-item" data-page="analytics">
                    <i class="fas fa-chart-bar"></i>
                    <span>数据统计</span>
                </div>
                <div class="nav-item" data-page="settings">
                    <i class="fas fa-cog"></i>
                    <span>系统设置</span>
                </div>
            </nav>
        </aside>

        <!-- 主内容区 -->
        <main class="main-content">
            <!-- 工作台页面 -->
            <div class="page active" id="dashboard">
                <div class="page-header">
                    <h1>工作台</h1>
                    <div class="quick-actions">
                        <button class="btn btn-primary" onclick="showUploadModal()">
                            <i class="fas fa-upload"></i> 上传文档
                        </button>
                        <button class="btn btn-outline" onclick="showPage('projects')">
                            <i class="fas fa-plus"></i> 新建项目
                        </button>
                    </div>
                </div>

                <!-- 数据概览卡片 -->
                <div class="stats-grid">
                    <div class="stat-card">
                        <div class="stat-icon">
                            <i class="fas fa-file-alt"></i>
                        </div>
                        <div class="stat-content">
                            <h3>3,149</h3>
                            <p>总文档数</p>
                            <span class="stat-change positive">+156 本周</span>
                        </div>
                    </div>
                    <div class="stat-card">
                        <div class="stat-icon">
                            <i class="fas fa-project-diagram"></i>
                        </div>
                        <div class="stat-content">
                            <h3>23</h3>
                            <p>活跃项目</p>
                            <span class="stat-change positive">+3 本月</span>
                        </div>
                    </div>
                    <div class="stat-card">
                        <div class="stat-icon">
                            <i class="fas fa-search"></i>
                        </div>
                        <div class="stat-content">
                            <h3>847</h3>
                            <p>今日搜索</p>
                            <span class="stat-change negative">-12% 昨日</span>
                        </div>
                    </div>
                    <div class="stat-card">
                        <div class="stat-icon">
                            <i class="fas fa-clock"></i>
                        </div>
                        <div class="stat-content">
                            <h3>2.3s</h3>
                            <p>平均响应</p>
                            <span class="stat-change positive">-0.5s 优化</span>
                        </div>
                    </div>
                </div>

                <!-- 最近文档和快速操作 -->
                <div class="dashboard-grid">
                    <div class="recent-documents">
                        <div class="section-header">
                            <h2>最近文档</h2>
                            <a href="#" onclick="showPage('documents')">查看全部</a>
                        </div>
                        <div class="document-list" id="recentDocuments">
                            <!-- 动态生成文档列表 -->
                        </div>
                    </div>
                    <div class="quick-access">
                        <div class="section-header">
                            <h2>常用项目</h2>
                        </div>
                        <div class="project-quick-list">
                            <div class="project-item" onclick="showProjectDocuments('MMC项目')">
                                <div class="project-color" style="background: #409EFF;"></div>
                                <div class="project-info">
                                    <h4>MMC项目</h4>
                                    <p>45个文档 | 最近更新：2小时前</p>
                                </div>
                            </div>
                            <div class="project-item" onclick="showProjectDocuments('设备采购')">
                                <div class="project-color" style="background: #67C23A;"></div>
                                <div class="project-info">
                                    <h4>设备采购</h4>
                                    <p>23个文档 | 最近更新：1天前</p>
                                </div>
                            </div>
                            <div class="project-item" onclick="showProjectDocuments('培训资料')">
                                <div class="project-color" style="background: #E6A23C;"></div>
                                <div class="project-info">
                                    <h4>培训资料</h4>
                                    <p>67个文档 | 最近更新：3天前</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 文档管理页面 -->
            <div class="page" id="documents">
                <div class="page-header">
                    <h1>文档管理</h1>
                    <div class="toolbar">
                        <div class="view-controls">
                            <button class="view-btn active" data-view="grid">
                                <i class="fas fa-th"></i>
                            </button>
                            <button class="view-btn" data-view="list">
                                <i class="fas fa-list"></i>
                            </button>
                        </div>
                        <div class="filter-controls">
                            <select class="filter-select" id="typeFilter">
                                <option value="">全部类型</option>
                                <option value="pdf">PDF</option>
                                <option value="ppt">PPT</option>
                                <option value="doc">Word</option>
                                <option value="img">图片</option>
                            </select>
                            <select class="filter-select" id="projectFilter">
                                <option value="">全部项目</option>
                                <option value="mmc">MMC项目</option>
                                <option value="purchase">设备采购</option>
                                <option value="training">培训资料</option>
                            </select>
                        </div>
                        <button class="btn btn-primary" onclick="showUploadModal()">
                            <i class="fas fa-upload"></i> 上传文档
                        </button>
                    </div>
                </div>

                <div class="documents-container">
                    <div class="documents-grid" id="documentsGrid">
                        <!-- 动态生成文档卡片 -->
                    </div>
                </div>
            </div>

            <!-- 项目管理页面 -->
            <div class="page" id="projects">
                <div class="page-header">
                    <h1>项目管理</h1>
                    <button class="btn btn-primary" onclick="showNewProjectModal()">
                        <i class="fas fa-plus"></i> 新建项目
                    </button>
                </div>

                <div class="projects-container">
                    <div class="projects-grid" id="projectsGrid">
                        <!-- 动态生成项目卡片 -->
                    </div>
                </div>
            </div>

            <!-- 高级搜索页面 -->
            <div class="page" id="search">
                <div class="page-header">
                    <h1>高级搜索</h1>
                </div>

                <div class="advanced-search">
                    <div class="search-form">
                        <div class="form-row">
                            <label>关键词搜索</label>
                            <input type="text" placeholder="输入关键词..." id="advancedKeyword">
                        </div>
                        <div class="form-row">
                            <label>文件类型</label>
                            <div class="checkbox-group">
                                <label><input type="checkbox" value="pdf"> PDF</label>
                                <label><input type="checkbox" value="ppt"> PPT</label>
                                <label><input type="checkbox" value="doc"> Word</label>
                                <label><input type="checkbox" value="img"> 图片</label>
                            </div>
                        </div>
                        <div class="form-row">
                            <label>时间范围</label>
                            <div class="date-range">
                                <input type="date" id="startDate">
                                <span>至</span>
                                <input type="date" id="endDate">
                            </div>
                        </div>
                        <div class="form-row">
                            <label>关联项目</label>
                            <select multiple id="projectSelect">
                                <option value="mmc">MMC项目</option>
                                <option value="purchase">设备采购</option>
                                <option value="training">培训资料</option>
                            </select>
                        </div>
                        <div class="form-actions">
                            <button class="btn btn-primary" onclick="performAdvancedSearch()">
                                <i class="fas fa-search"></i> 搜索
                            </button>
                            <button class="btn btn-outline" onclick="clearSearchForm()">
                                重置
                            </button>
                        </div>
                    </div>
                    <div class="search-results" id="searchResults">
                        <!-- 搜索结果将在这里显示 -->
                    </div>
                </div>
            </div>

            <!-- 数据统计页面 -->
            <div class="page" id="analytics">
                <div class="page-header">
                    <h1>数据统计</h1>
                </div>
                <div class="analytics-dashboard">
                    <div class="chart-container">
                        <h3>文档使用趋势</h3>
                        <div class="chart-placeholder">
                            <i class="fas fa-chart-line"></i>
                            <p>图表占位符 - 实际开发中将集成Chart.js</p>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 系统设置页面 -->
            <div class="page" id="settings">
                <div class="page-header">
                    <h1>系统设置</h1>
                </div>
                <div class="settings-container">
                    <div class="settings-section">
                        <h3>用户设置</h3>
                        <div class="setting-item">
                            <label>用户名</label>
                            <input type="text" value="张经理">
                        </div>
                        <div class="setting-item">
                            <label>邮箱</label>
                            <input type="email" value="zhang@company.com">
                        </div>
                    </div>
                </div>
            </div>
        </main>
    </div>

    <!-- 上传文档模态框 -->
    <div class="modal" id="uploadModal">
        <div class="modal-content">
            <div class="modal-header">
                <h3>上传文档</h3>
                <button class="close-btn" onclick="hideUploadModal()">
                    <i class="fas fa-times"></i>
                </button>
            </div>
            <div class="modal-body">
                <div class="upload-area" id="uploadArea">
                    <div class="upload-icon">
                        <i class="fas fa-cloud-upload-alt"></i>
                    </div>
                    <p>拖拽文件到此处，或<span class="upload-link">点击选择文件</span></p>
                    <input type="file" id="fileInput" multiple accept=".pdf,.doc,.docx,.ppt,.pptx,.jpg,.png" hidden>
                </div>
                <div class="upload-options">
                    <label>关联项目</label>
                    <select id="uploadProject">
                        <option value="">选择项目（可选）</option>
                        <option value="mmc">MMC项目</option>
                        <option value="purchase">设备采购</option>
                        <option value="training">培训资料</option>
                    </select>
                    <label>标签</label>
                    <input type="text" placeholder="添加标签，用逗号分隔" id="uploadTags">
                </div>
            </div>
            <div class="modal-footer">
                <button class="btn btn-outline" onclick="hideUploadModal()">取消</button>
                <button class="btn btn-primary" onclick="startUpload()">开始上传</button>
            </div>
        </div>
    </div>

    <!-- 文档预览模态框 -->
    <div class="modal" id="previewModal">
        <div class="modal-content modal-large">
            <div class="modal-header">
                <h3 id="previewTitle">文档预览</h3>
                <div class="preview-actions">
                    <button class="btn btn-small" onclick="downloadDocument()">
                        <i class="fas fa-download"></i> 下载
                    </button>
                    <button class="close-btn" onclick="hidePreviewModal()">
                        <i class="fas fa-times"></i>
                    </button>
                </div>
            </div>
            <div class="modal-body">
                <div class="preview-content" id="previewContent">
                    <!-- 预览内容 -->
                </div>
            </div>
        </div>
    </div>

    <!-- Toast 提示 -->
    <div class="toast" id="toast">
        <i class="fas fa-check-circle"></i>
        <span id="toastMessage">操作成功</span>
    </div>

    <script src="scripts.js"></script>
</body>
</html>